<!--
 * @Author: 赖钊亮
 * @Description: 当前热销
 * @Date: 2020-07-03 09:49:27
 * @LastEditTime: 2020-07-07 14:00:11
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121f:\JK\jkshopping\src\pages\my\components\hotSale.vue
--> 
<template>
  <div>
   <!-- 当前热销 -->
    <div class="hotSale">
      <h1>
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
        当/前/热/销
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
      </h1>
      <van-grid :border="true" :gutter="10" :column-num="2">
        <van-grid-item v-for="(item,idx) of datas" :key="idx">
          <router-link :to="{path:'/goodsDetails',query:{id:item.id}}">
            <div class="img">
              <van-image width="100%" height="100%" lazy-load :src="item.goods_thumb" />
            </div>
          </router-link>
          <div>
            <router-link :to="{path:'/goodsDetails',query:{id:item.id}}">
              <p class="goods_name">{{item.goods_name}}</p>
            </router-link>
            <div class="price clearFix">
              <p>{{item.goods_price | rmb}}</p>
              <!-- 收藏按钮 -->
              <van-icon name="like" :class="(current === item.id) && (active === true) ? 'active' :null " @click="myLike(item.id)" />
            </div>
            <div class="comment">
              <p>35个评价&nbsp;&nbsp;98%好评</p>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/goods.js";
export default {
  data() {
    return {
      datas: [],
      current:0,
      active:false
    };
  },
  methods: {
    async API_goods(is_recommend, start_price, end_price) {
      let params = {
        is_recommend,
        start_price,
        end_price
      };
      return await api.goods(params);
    },
    myLike(id) {
      console.log(id);
      this.current = id;
      if(this.active === false){
        
        this.active=true
      }else{
      
        
        this.active=false
      }
    }
  },

  async created() {
    let res = await this.API_goods(1, 50, 400);

    if (res.data.code === 200) {
      this.datas = res.data.data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
   .hotSale{
        background: #f4f4f4;
        h1{
            display: flex;
            align-items:center;
            padding:20px 0;
            justify-content:center
        }
        .van-grid{
            .img{
                height: 200px;
                width: 100%;
            }
            .goods_name{
                color: #000;
            }
            p{
               
                display: -webkit-box;
                -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;//这里设置显示文本行数
                 overflow: hidden;
            } 
            .price{
                margin: 10px 0;
                p{
                    color: #ff7882;
                    float: left;
                    font-weight: bold;
                }
                .van-icon{
                    font-size: 20px;
                    color: #dddddd;
                    float: right;
                }
                .active{
                    color: #ff7882;
                }
            }
            
            .comment{
                p{
                    font-size: 10px;
                    color: #dddddd;
                }
            }
        }
    }
</style>